<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#tab{				
				width: 450px;
				height: 250px;	
				text-align: center;	
				margin: 0px auto;
				border-collapse: collapse;
				font-size: 14px;

			}
			thead{
				background-color:rgb(0,152,201);
				line-height: 40px;
			}
			td{
				border: 1px solid white;
				border-bottom: none;
				border-top: none;
			}

		</style>
	</head>
	<body>
		<table id="tab">		
			<thead>
				<tr>
					<td>序号</td>
					<td>姓名</td>
					<td>课程</td>
					<td>成绩</td>
				</tr>
			</thead>
			<tbody id="tbody">
				<tr>
					<td>1</td>
					<td>吕不韦</td>
					<td>语文</td>
					<td>100</td>
				</tr>
				<tr>
					<td>2</td>
					<td>吕布</td>
					<td>日语</td>
					<td>100</td>
				</tr>
				<tr>
					<td>3</td>
					<td>吕蒙</td>
					<td>营销学</td>
					<td>100</td>
				</tr>
				<tr>
					<td>4</td>
					<td>吕尚</td>
					<td>数学</td>
					<td>100</td>
				</tr>
				<tr>
					<td>5</td>
					<td>吕雉</td>
					<td>英语</td>
					<td>100</td>
				</tr>
				<tr>
					<td>6</td>
					<td>吕超</td>
					<td>体育</td>
					<td>100</td>
				</tr>
			</tbody>
		</table>
		<script>
			var tbody =document.getElementById("tbody");
			var trArray= tbody.getElementsByTagName("tr");
			for(var i=0;i<=trArray.length;i++){			
				if(i%2==0){
				trArray[i].style.backgroundColor="rgb(204,204,204)"	
				}else{
					trArray[i].style.backgroundColor="rgb(163,163,163)"
					}
				var color ="";
				trArray[i].onmouseover=function(){
					color=this.style.backgroundColor;
					this.style.backgroundColor="white";
				}
				trArray[i].onmouseout=function(){
					this.style.backgroundColor=color;
				}
			}
		</script>
	</body>
</html>
